<template>
  <div class="map_box">
    <div id="map" class="chart_box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

import als from '@/assets/geoJson/city-json/als.json'
import bt from '@/assets/geoJson/city-json/bt.json'
import byne from '@/assets/geoJson/city-json/byne.json'
import cf from '@/assets/geoJson/city-json/cf.json'
import eeds from '@/assets/geoJson/city-json/eeds.json'
import hhht from '@/assets/geoJson/city-json/hhht.json'
import hlbe from '@/assets/geoJson/city-json/hlbe.json'
import tl from '@/assets/geoJson/city-json/tl.json'
import wh from '@/assets/geoJson/city-json/wh.json'
import wlcb from '@/assets/geoJson/city-json/wlcb.json'
import xam from '@/assets/geoJson/city-json/xam.json'
import xlgl from '@/assets/geoJson/city-json/xlgl.json'

export default {
  name: 'CityMap',
  props: { 
    cityName: String
  },
  data() {
    return {
      mapData: null,
      options: {
        //backgroundColor: '#0F1C3C',
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.value.length > 1) {
              return params.data.name + "" + params.data.value[2];
            } else {
              return params.name;
            }
          },
        },
        geo: {
          map: "citymap",
          show: true,
          roam: false,
          label: {
          },
          layoutSize: "80%",
          itemStyle: {
            areaColor: '#eee',
            shadowOffsetX: 9,
            shadowOffsetY: 9,
            shadowColor: "#eee",
            shadowBlur: 20,
          },
        },
        series: [
          {
            type: "map",
            map: "citymap",
            aspectScale: 0.75,
            label: {
              //调整数值
              position: "right",
              show: true,
              color: "#fff",
              fontSize: 14,
            },
            
            itemStyle: {
              areaColor: 'rgb(86, 162, 227)',
              // 地图块颜色
              // areaColor: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       // color: "#073684", // 0% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //     {
              //       offset: 1,
              //       // color: "#061E3D", // 100% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //   ],
              // },
              borderColor: "#fff",
              borderWidth: 1,
              //鼠标放置颜色加深
              emphasis: {
                areaColor: '#eee',
                borderColor: '#888',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#888',
              },
            },
            label: {
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#efefef',
              },
              emphasis: {
                textStyle: {
                  color: '#000',
                },
              },
            },
            data: [],
          }
        ],
      }
    }
  },
  watch: {
    cityName: {
      handler(val) {
        if (val == '阿拉善盟') {
          this.mapData = als
        } else if (val == '包头市') {
          this.mapData = bt
        } else if (val == '巴彦淖尔市') {
          this.mapData = byne
        } else if (val == '赤峰市') {
          this.mapData = cf
        } else if (val == '鄂尔多斯市') {
          this.mapData = eeds
        } else if (val == '呼和浩特市') {
          this.mapData = hhht
        } else if (val == '呼伦贝尔市') {
          this.mapData = hlbe
        } else if (val == '通辽市') {
          this.mapData = tl
        } else if (val == '锡林郭勒盟') {
          this.mapData = xlgl
        } else if (val == '乌兰察布市') {
          this.mapData = wlcb
        } else if (val == '兴安盟') {
          this.mapData = xam
        } else if (val == '乌海市') {
          this.mapData = wh
        }

        this.initMap()
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    initMap() {
      let map = echarts.init(document.getElementById("map"));
      echarts.registerMap('citymap', this.mapData) //注册
      map.setOption(this.options)

      // 地图点击事件
      map.on('click', params => {
        this.$emit('clickCityMap', params.name)
      });
    },
  }
}

</script>

<style>
.map_box {
  width: 100% !important;
  height: 100% !important;
}

.chart_box {
  width: 100% !important;
  height: 100% !important;
}
</style>